<template>
<div style="background-color:#FAAB0C">
<!--刷新组件-->




  <div style="overflow: hidden"><!--user.avator-->
    <div style="width:20%;height:1.5rem; background-color:#FAAB0C; float:left">
      <div v-if="user!=null">
        <van-image
          round
          width="1rem"
          height="1rem"
          style="margin-left:.2rem;margin-top:.3rem"
          :src="user.avator"
        />
      </div>
      <div v-if="user==null">
        <van-image
          round
          width="1rem"
          height="1rem"
          style="margin-left:.2rem;margin-top:.3rem"
          src="http://81.68.175.78/avatar/avatar01.png"
        />
      </div>
      <!--https://unpkg.com/@vant/assets/cat.jpeg-->
    </div>
    <div style="width:60%;height:1.5rem; background-color:#FAAB0C; float:left">
      <div v-if="user!=null">
        <div style="font-size:.25rem; margin-left:.3rem; margin-top:.3rem">{{user.name}}</div>
        <div style="font-size:.2rem; margin-left:.3rem; margin-top:.1rem">的个人中心</div>
        <div style="font-size:.2rem; margin-left:.3rem; margin-top:.3rem">...这个人很懒，什么都没留下</div>
      </div>
      <div v-if="user==null">
        <div style="font-size:.25rem; margin-left:.3rem; margin-top:.3rem">{{user.name}}</div>
        <div style="font-size:.2rem; margin-left:.3rem; margin-top:.1rem">点击头像进行登录</div>
        <div style="font-size:.2rem; margin-left:.3rem; margin-top:.3rem">...这个人很懒，什么都没留下</div>
      </div>

    </div>
    <div style="width:20%;height:2rem; background-color:#FAAB0C; float:right">
      <van-icon size="0.3rem" style=" margin-left:.7rem;margin-top:1.2rem" name="setting"  @click="jump('/edit')"/>

    </div>
  </div>
<!--  <van-divider>文字</van-divider>-->
<!--  <van-divider></van-divider>-->
<!--订单状态  style="margin-top: 1rem"-->
  <van-grid :column-num="5" >



    <van-grid-item icon="coupon" dot text="全部订单" @click="jump('/order')"></van-grid-item>
    <van-grid-item icon="balance-list" :badge="orderArray[0]" text="待付款" @click="jump('/order2')"></van-grid-item>
    <van-grid-item icon="todo-list" :badge="orderArray[1]" text="待收货" @click="jump('/order3')"></van-grid-item>
    <van-grid-item icon="comment" :badge="orderArray[2]" text="待评价" @click="jump('/order4')"></van-grid-item>
    <van-grid-item icon="gold-coin" text="收货地址" @click="jump('/address')"></van-grid-item>

  </van-grid>

  <van-notice-bar
    left-icon="volume-o"
    text="点击获取优惠卷 立享7折优惠。"
  />



<div>

</div>

  <van-collapse v-model="activeNames" style="font-size:0.5rem">
    <van-collapse-item title="新人礼包" name="1">
      代码是写出来给人看的，附带能在机器上运行。
    </van-collapse-item>
    <van-collapse-item title="海量优惠卷任你挑" name="2">
      技术无非就是那些开发它的人的共同灵魂。
    </van-collapse-item>
    <van-collapse-item title="新品上市" name="3">
      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
    </van-collapse-item>
  </van-collapse>
  <!--显示 所有订单-->



</div>
</template>

<script>

export default {


  name: "person",
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
  created(){
    this.name = localStorage.getItem("username");
    console.log("当前登录的用户是"+this.name);
    this.loadData()

  },
  data(){
    return{
      loading:true,
      name:"请登录",
      user:{

      },
      orderArray:[],


    }
  },
  methods:{
    jump(path){
      this.$router.push(path)

    },
    loadData() {
      let _this = this
      this.$axios.post("/order/selectOrderAccountOfUser").then(
        function (response) {
          console.log(response.data.data.user)
          _this.user = response.data.data.user;
          _this.orderArray = response.data.data.orderArray;
          _this.user.avator ="http://81.68.175.78/"+response.data.data.user.avatar

        }
      )
    }


  },
 /* setup() {
    const loading = ref(true);

    onMounted(() => {
      loading.value = false;
    });

    return {
      loading,
    };
  },*/

}


</script>

<style scoped>


.goods-card {
  margin: 0;
  background-color:navajowhite;
}

.delete-button {
  height: 100%;
}

</style>
